<template>
  <div class="StockMarket f-cb">
    <div class="f-cb StockMarket_top">
      <div class="left fl boxs">
        <h2>{{ $t('shStock.sh_Market.57klq52fdt80') }}</h2>
        <div class="cont f-cb" :style="{ height: heightList.allHeight + 'px' }">
          <ul class="f-cb MarketList">
            <li
              v-for="(item, index) in timeList"
              :key="index"
              :class="index == ActiveMar ? 'on' : ''"
              @click="ListChange(index)"
            >
              <h3>{{ item.detail.name }}</h3>
              <h2
                class="lastprice"
                :class="
                  item.detail.gain > 0
                    ? 'on red'
                    : item.detail.gain == 0
                    ? ''
                    : 'in green'
                "
              >
                {{ item.detail.latestPrice | toFixed(item.detail.precision) }}
              </h2>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'on red'
                    : item.detail.gain == 0
                    ? ''
                    : 'in green'
                "
              >
                <span
                  >{{ item.detail.chg > 0 ? "+" : ""
                  }}{{ parseFloat(item.detail.chg) | toFixed(2) }}</span
                >
                <span
                  >{{ item.detail.gain > 0 ? "+" : ""
                  }}{{ parseFloat(item.detail.gain * 100) | toFixed(2) }}%</span
                >
              </p>
            </li>
          </ul>
          <div class="echarts echartsone" v-if="timeList.length >= 0">
            <my-echarts
              :timeData="timeData"
              :echartHeight="heightList.slideHeight"
              :echartWidth="echartWidth"
              ref="dapanT"
            ></my-echarts>
          </div>
        </div>
      </div>
      <div class="fl boxs sh_right">
        <h2>{{ $t('shStock.sh_Market.57klq52fh0o0') }}</h2>
        <div :style="{ height: heightList.allHeight + 'px' }" class="cont f-cb">
          <div class="sh_center fl">
            <ul class="list f-cb">
              <li
                v-for="item in AGChangeList"
                :key="item.id"
                :class="AGActive == item.id ? 'hover' : ''"
                @click="AGChange(item)"
              >
                {{ item.name }}
              </li>
            </ul>
            <sh-infos
              :AGActive="AGActive"
              :AHConnectLists="AHConnectList"
            ></sh-infos>
          </div>
          <div class="echartstwo">
            <sh-echarts
              :echartHeight="heightList.slideHeight"
              :echartWidth="echartWidtht"
              :ShEcharts="{ ShEchartsList: ShEchartsList, AGActive: AGActive }"
            ></sh-echarts>
          </div>
        </div>
      </div>
    </div>
    <div class="StockMarket_bot f-cb">
      <ul class="f-cb shMarketBotList">
        <!-- 沪股通 -->
        <li>
          <h4>
            {{ $t('shStock.sh_Market.57klq52fhi80') }}
          </h4>
          <shList
            :sortList="SSE_flow"
            :sumbit="SSE_flow.sumbit"
            @ListClick="ListClick"
            :stockHeight="changeHeight"
          ></shList>
        </li>
        <!-- 深股通 -->
        <li>
          <h4>
            {{ $t('shStock.sh_Market.57klq52fhu40') }}
          </h4>
          <shList
            :sortList="SZSE_flow"
            :sumbit="SZSE_flow.sumbit"
            @ListClick="ListClick"
            :stockHeight="changeHeight"
          ></shList>
        </li>
        <!-- 港股通(沪) -->
        <li>
          <h4>
            {{ $t('shStock.sh_Market.57klq52fi540') }}
          </h4>
          <shList
            :sortList="HK_CN"
            :sumbit="HK_CN.sumbit"
            @ListClick="ListClick"
            :stockHeight="changeHeight"
          ></shList>
        </li>
        <!-- 港股通(深) -->
        <li>
          <h4>
            {{ $t('shStock.sh_Market.57klq52fihg0') }}
          </h4>
          <shList
            :sortList="CN_HK"
            :sumbit="CN_HK.sumbit"
            @ListClick="ListClick"
            :stockHeight="changeHeight"
          ></shList>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { get_grail_index } from "@/assets/js/API/market.js";
import { get_market, get_gain_distribute, get_amtFlow } from "@/assets/js/API/market.js";
import myEcharts from "@/components/info/echart.vue";
import AshareList from "@/components/stock/Ashare_List.vue";
import shList from "@/components/stock/sh_List.vue";
import stockLinlist from "@/components/stock/stock_Linlist.vue";
import shInfos from "@/components/stock/sh_infos.vue";
import shEcharts from "@/components/stock/sh_echarts.vue";
export default {
  components: {
    myEcharts,
    stockLinlist,
    AshareList,
    shInfos,
    shEcharts,
    shList,
  },
  data() {
    return {
      LeadHeight: null, // 底部内容
      changeHeight: null, //
      heightList: {
        allHeight: null,
        slideHeight: null,
      },
      timeList: [],
      subtypes: {
        type: "CN",
      },
      timeClick: null,
      ActiveMar: 0,
      timeData: {}, // 当前分时数据
      echartWidth: null,
      zhangmnum: {},
      hk_securities: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 5,
        loading: true,
        submit: {},
        title: this.$i18n.t("m.quoteChange"),
      },
      SSE_flow: {
        url: "api/market/index",
        order: ["", "DESC", "ASC"],
        submit: {
          field: "gain",
          order: "DESC",
          plate: "1",
          page: 1,
          pageSize: 20,
          securityType: "1",
          type: "CN",
        },
      },
      SZSE_flow: {
        url: "api/market/index",
        order: ["", "DESC", "ASC"],
        submit: {
          field: "gain",
          order: "DESC",
          plate: "2",
          page: 1,
          pageSize: 20,
          securityType: "1",
          type: "CN",
        },
      },
      HK_CN: {
        url: "api/market/index",
        order: ["", "DESC", "ASC"],
        submit: {
          field: "gain",
          order: "DESC",
          plate: "3",
          page: 1,
          pageSize: 20,
          securityType: "1",
          type: "HK",
        },
      },
      CN_HK: {
        url: "api/market/index",
        order: ["", "DESC", "ASC"],
        submit: {
          field: "gain",
          order: "DESC",
          plate: "4",
          page: 1,
          pageSize: 20,
          securityType: "1",
          type: "HK",
        },
      },
      SecuritiesData: [],
      AGChangeList: [
        { name: this.$t('shStock.sh_Market.57klq52dghh0'), id: 1 },
        { name: this.$t('shStock.sh_Market.57klq52aqhh0'), id: 2 },
      ],
      AGActive: 0,
      echartWidtht: null,
      AHConnectList: {},
      ShEchartsList: [],
      selectOption: [
        {
          value: 1,
          name: this.$t('shStock.sh_Market.57klq52fixw0'),
        },
        {
          value: 5,
          name: this.$t('shStock.sh_Market.57klq52fjho0'),
        },
        {
          value: 20,
          name: this.$t('shStock.sh_Market.57klq52fjtk0'),
        },
        {
          value: 60,
          name: this.$t('shStock.sh_Market.57klq52fk3g0'),
        },
        {
          value: 6,
          name: this.$t('shStock.sh_Market.57klq52fkik0'),
        },
      ],
      selectone: 1,
      selecttwo: 1,
      selectthe: 1,
      selectfour: 1,
      typeList: [
        { id: 1, name: this.$t('shStock.sh_Market.57klq52fhi80') },
        { id: 2, name: this.$t('shStock.sh_Market.57klq52fhu40') },
        { id: 3, name: this.$t('shStock.sh_Market.57klq52fi540') },
        { id: 4, name: this.$t('shStock.sh_Market.57klq52fihg0') },
      ],
      typeListAOne: "1",
      typeListATwo: "1",
      typeListAThe: "1",
      typeListAFour: "1",
      HkCnObj: {}, // 南向北向全部数据
      ShEcharts: {
        ShEchartsList: [],
        AGActive: 1,
      }, // K线数据
    };
  },
  created() {
    if ($(window).width() > 1441) {
      this.heightList = { allHeight: 398, slideHeight: 378 };
    } else {
      this.heightList = { allHeight: 298, slideHeight: 278 };
    }
  },
  mounted() {
    this.getHK();
    this.setval();
    this.getupdown();
    // this.getAHConnect();
    this.getHK_CN(1);
    // this.getupdata(1,'UpData',1,'hk_Up');
    // this.getupdata(2,'downData',1,'hk_down');
    // this.getupdata(3,'huanData',1,'hk_huan');
    // this.getFinancingData(4,'FinancingData',1,'hk_financing',1)
    this.getFinancingData(5, "SecuritiesData", 1, "hk_securities", 2);
    var _this = this;
    this.$nextTick(function () {
      this.echartWidth = $(".echartsone").width();
      this.echartWidtht = $(".echartstwo").width();
      this.changeHeight =
        $(".StockMarket").height() - $(".StockMarket_top").height() - 39;
      this.LeadHeight = $(".change_height").height();
    });
  },
  methods: {
    ListChange(index) {
      // 切换重新填充数据
      this.ActiveMar = index;
      this.timeData = this.timeList[index];
      this.$refs.dapanT.getTimeLines(this.timeData);
      this.echartWidth = $(".echarts").width();
    },
    AGChange(item) {
      this.AGActive = item.id;
      this.ShEcharts.AGActive = item.id;
    },
    // 得到沪股通南向北向K线
    async getHK_CN(id) {
      const res = await get_amtFlow();
      if (res.code != 1) return this.$message.error(res.msg);
      this.HkCnObj = res.data;
      this.AHConnectList = res.data;
      this.ShEchartsList = res.data.flow;
      this.AGActive = id;
      console.log(this.HkCnObj, "K线数据");
    },
    async getHK() {
      const res = await get_grail_index({ ...this.subtypes })
      if (res.code != 1) return this.$message.error(res.msg);
      this.timeList = res.data.list;
      this.echartWidth = $(".echarts").width();
    },
    getupdown() {
      let _this = this;
        get_gain_distribute({ ..._this.subtypes }).then(function (response) {
          if (response.code == 1) {
            _this.barList = Object.assign({}, _this.barList, {
              numdata: response.data.list,
            });
            _this.zhangmnum = response.data.total;
            _this.zhangmnum.all =
              _this.zhangmnum.low + _this.zhangmnum.up + _this.zhangmnum.zero;
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    scrollBottom(obj, list, page, data, num) {
      //alert(this[data].loading)
      this[data].loading = true;
      if (obj == 4 || obj == 5) {
        this.getFinancingData(obj, list, page, data, num);
      } else {
        this.getupdata(obj, list, page, data);
      }
    },
    getupdata(obj, list, page, data) {
      let _this = this;
      if (_this[data].loading) {
        _this.$axios
          .get("/market.v1/market/getRanking", {
            params: { type: "CN", rankType: obj, page: page },
          })
          .then(function (response) {
            if (response.code == 1) {
              _this[data].page++;
              // _this[list] = response.data.list;
              _this[list] = [..._this[list], ...response.data.list];
              _this[data].loading = false;
            } else {
              _this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    getFinancingData(obj, list, page, data, num) {
      let _this = this;
      if (_this[data].loading) {
        get_market({
          type: "CN",
          platform: "PC",
          page: page,
          pageSize: 20,
          plate: num,
          securityType: 1,
        })
          .then(function (response) {
            if (response.code == 1) {
              _this[data].page++;
              _this[list] = [..._this[list], ...response.data];
              _this[data].loading = false;
            } else {
              _this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    // ChangeTypeList(parameter,item){
    //     var _this = this;
    //     _this[parameter] = item.id;
    //     console.log(item,'parameter555')
    // },
    ChangetypeListAOne(tab, event) {
      this.typeListAOne = tab.name;
    },
    ChangetypeListATwo(tab, event) {
      this.typeListATwo = tab.name;
    },
    ChangetypeListAThe(tab, event) {
      this.typeListAThe = tab.name;
    },
    ChangetypeListAFour(tab, event) {
      this.typeListAFour = tab.name;
    },
    ListClick(isTrue) {
      this.$store.dispatch("SetShActive", isTrue);
    },
    setval() {
      var _this = this;
      _this.timeClick = setInterval(() => {
        _this.getHK();
      }, 10000);
    },
  },
  watch: {
    "$store.state.wsModel.daPanDetail": {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          // _this.$forceUpdate();
          let data = JSON.parse(val);
          // 沪深
          if (data[0] == "SSE" || data[0] == "SZSE") {
            for (let i = 0; i < _this.timeList.length; i++) {
              // 当前列表股票代码一致
              if (_this.timeList[i].detail.symbol == data[3]) {
                this.$nextTick(() => {
                  _this.$set(_this.timeList[i].detail, "latestPrice", data[4]);
                  _this.$set(
                    _this.timeList[i].detail,
                    "gain",
                    (data[4] - data[8]) / data[8]
                  );
                  _this.$set(_this.timeList[i].detail, "chg", data[4] - data[8]);
                });
                break;
              }
            }
          }
        }
      },
      deep: true,
    },
    timeList: {
      handler(val) {
        if(val != null) {
          // 定时刷新大盘分时线
          if(this.ActiveMar != null) {
            this.timeData = this.timeList[this.ActiveMar];
            this.$refs.dapanT.getTimeLines(this.timeData);
          }
        }
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeClick); //关闭
  },
};
</script>
<style lang="less">
.StockMarket {
  .StockMarket_top {
    margin-bottom: 20px;
    .boxs {
      border: 1px solid @LightBorderLine;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      h2 {
        // font-size: 14px;
        // color: @fff;
        // line-height: 40px;
        // padding: 0 15px;
        // border-bottom: 1px solid @LightBorderLine;
        font-size: 12px;
        color: @fbSix;
        padding: 0 12px;
        line-height: 30px;
        background: @sideColor;
      }
      .cont {
        padding: 10px 5px 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .MarketList {
        width: 160px;
        text-align: center;
        float: left;
        li {
          width: 100%;
          padding: 10px 0 11px;
          border: 1px solid @LightBorderLine;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          cursor: pointer;
          margin-top: 10px;
        }
        li:first-child {
          margin-top: 0;
        }
        li.on,
        li:hover {
          background: @sideColor;
          border-color: @sideColor;
        }
        h3 {
          font-size: 14px;
          color: @fff;
          line-height: 32px;
        }
        .lastprice {
          // font-size:25px;
          // line-height: 40px;
          // border:none;
          font-size: 18px;
          color: @fbSix;
          padding: 0 12px;
          line-height: 30px;
          background: transparent;
        }
        p {
          font-size: 14px;
          line-height: 26px;
          span {
            margin: 0 2px;
            color: @fbSix;
          }
        }
      }
      .echarts {
        float: right;
        width: calc(100% - 170px);
        overflow: auto;
      }
      .slie_width {
        display: flex;
        p {
          float: left;
          padding-top: 19px;
          position: relative;
          height: 32px;
          box-sizing: border-box;
          span {
            position: absolute;
            bottom: 0;
            left: 50%;
            font-size: 14px;
            color: @fbSix;
            width: 150px;
            line-height: 20px;
            transform: translate(-50%, 0);
            text-align: center;
          }
        }
        p:after {
          width: 100%;
          height: 6px;
          background: @fbSix;
          content: " ";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
        p.on {
          span {
            text-align: left;
            left: 0;
            transform: translate(0, 0);
          }
        }
        p.in {
          span {
            text-align: right;
            left: auto;
            right: 0;
            transform: translate(0, 0);
          }
        }
      }
    }
    .left {
      margin-right: 20px;
      width: 47%;
    }
    .sh_right {
      float: right;
      width: calc(53% - 20px);
      .sh_center {
        width: 27%;
        height: 100%;
        border: 1px solid @LightBorderLine;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .list {
          width: 100%;
          border-bottom: 1px solid @LightBorderLine;
          position: relative;
          li {
            float: left;
            width: 50%;
            font-size: 12px;
            color: @fbSix;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }
          li.hover,
          li:hover {
            background: @LightBorderLine;
            color: @fff;
          }
        }
      }
      .echartstwo {
        width: calc(73% - 10px);
        border: 1px solid @LightBorderLine;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: right;
        height: 100%;
        overflow: auto;
      }
    }
  }
  .StockMarket_bot {
    width: 100%;
    // height: calc(100% - 461px);
    .left {
      width: 58%;
      // height: 100%;
      border: 1px solid @LightBorderLine;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .right {
      width: calc(42% - 20px);
      // height: 100%;
      border: 1px solid @LightBorderLine;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    h2 {
      font-size: 12px;
      color: @fbSix;
      // padding: 0 12px;
      line-height: 30px;
      background: @sideColor;
    }
    ul {
      // height:calc(100% - 40px);
      padding: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      li:first-child {
        margin-left: 0;
      }
      li {
        float: left;
        // height: 100%;
        margin-left: 10px;
        width: calc((100% - 20px) / 3);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid @LightBorderLine;
        h4 {
          font-size: 12px;
          color: @fbSix;
          padding: 0 12px;
          line-height: 30px;
          background: @sideColor;
          cursor: pointer;
        }
        .change_height {
          width: 100%;
          // height: calc(100% - 30px);
        }
      }
    }
    ul.twoList {
      li {
        width: calc((100% - 20px) / 2);
      }
    }
    ul.shMarketBotList {
      padding: 0;
      li {
        width: calc((100% - 60px) / 4);
        margin-left: 20px;
        h4 {
          span {
            font-weight: normal;
          }
        }
        .el-select {
          width: 90px;
        }
        .el-input__inner {
          border: none;
          background: none;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          color: @fbSix;
          border-radius: 3px;
          font-size: 12px;
          padding-right: 15px;
        }
        .el-input__suffix {
          right: 0;
        }
        .el-input__icon {
          line-height: 30px;
          width: 13px;
        }
        .lists {
          padding: 0 12px;
          font-size: 12px;
          color: @fbSix;
          line-height: 30px;
          border-bottom: 1px solid @LightBorderLine;
          dd {
            float: left;
            font-size: 12px;
            margin-left: 15px;
            cursor: pointer;
          }
          dd.hover,
          dd:hover {
            color: @hoverColor;
          }
          dd:first-child {
            margin-left: 0;
          }
          .el-tabs {
            float: left;
            max-width: 65%;
            .el-tabs__header {
              margin-bottom: 0;
            }
            .el-tabs__item {
              font-size: 12px;
              padding: 0;
              padding-left: 15px;
              color: @fbSix;
              height: 30px;
              line-height: 30px;
            }
            .el-tabs__item:nth-child(2) {
              padding-left: 0;
            }
            .el-tabs__item.is-active {
              color: @hoverColor;
            }
            .el-tabs__nav-next,
            .el-tabs__nav-prev {
              line-height: 33px;
            }
            .el-tabs__nav-wrap::after {
              display: none;
            }
          }
        }
      }
      li:first-child {
        margin-left: 0;
      }
    }
  }
}

@media screen and (max-width: 1441px) {
  .StockMarket .StockMarket_top .boxs .MarketList h2 {
    font-size: 19px;
    line-height: 23px;
  }
  .StockMarket .StockMarket_top .boxs .MarketList h3 {
    line-height: 24px;
  }
  .AccountHandles .el-tabs__content h2 {
    font-size: 16px;
    line-height: 30px;
    padding: 0;
  }
  .StockMarket .StockMarket_top .boxs .MarketList li {
    padding: 6px 0 5px;
  }
  .AccountHandles .el-tabs__content h2 span.h1s {
    padding-right: 26px;
    background-position: right 10px !important;
  }
  .StockMarket .StockMarket_bot ul.shMarketBotList li .lists dd {
    margin-left: 2px;
  }
  .StockMarket .StockMarket_bot ul.shMarketBotList li .lists .el-tabs {
    max-width: 120px;
  }
}
@media screen and (min-width: 1920px) {
  .StockMarket .StockMarket_top .boxs .MarketList h2 {
    background-color: transparent;
  }
  .StockMarket {
    .StockMarket_bot {
      height: calc(100% - 430px);
      .left,
      .right {
        height: 100%;
      }
      ul {
        height: 98%;
        li {
          height: 100%;
          .change_height {
            height: calc(100% - 30px);
          }
        }
      }
    }
  }
}
</style>